$(function() {
	var myChart = echarts.init(document.getElementById('main'));
	var geoCoordMap = {
		'上海': [121.4648, 31.2891],
		'东莞': [113.8953, 22.901],
		'东营': [118.7073, 37.5513],
		'中山': [113.4229, 22.478],
		'临汾': [111.4783, 36.1615],
		'临沂': [118.3118, 35.2936],
		'丹东': [124.541, 40.4242],
		'丽水': [119.5642, 28.1854],
		'乌鲁木齐': [87.9236, 43.5883],
		'佛山': [112.8955, 23.1097],
		'保定': [115.0488, 39.0948],
		'兰州': [103.5901, 36.3043],
		'包头': [110.3467, 41.4899],
		'北京': [116.4551, 40.2539],
		'北海': [109.314, 21.6211],
		'南京': [118.8062, 31.9208],
		'南宁': [108.479, 23.1152],
		'南昌': [116.0046, 28.6633],
		'南通': [121.1023, 32.1625],
		'厦门': [118.1689, 24.6478],
		'台州': [121.1353, 28.6688],
		'合肥': [117.29, 32.0581],
		'呼和浩特': [111.4124, 40.4901],
		'咸阳': [108.4131, 34.8706],
		'哈尔滨': [127.9688, 45.368],
		'唐山': [118.4766, 39.6826],
		'嘉兴': [120.9155, 30.6354],
		'大同': [113.7854, 39.8035],
		'大连': [122.2229, 39.4409],
		'天津': [117.4219, 39.4189],
		'太原': [112.3352, 37.9413],
		'威海': [121.9482, 37.1393],
		'宁波': [121.5967, 29.6466],
		'宝鸡': [107.1826, 34.3433],
		'宿迁': [118.5535, 33.7775],
		'常州': [119.4543, 31.5582],
		'广州': [113.5107, 23.2196],
		'廊坊': [116.521, 39.0509],
		'延安': [109.1052, 36.4252],
		'张家口': [115.1477, 40.8527],
		'徐州': [117.5208, 34.3268],
		'德州': [116.6858, 37.2107],
		'惠州': [114.6204, 23.1647],
		'成都': [103.9526, 30.7617],
		'扬州': [119.4653, 32.8162],
		'承德': [117.5757, 41.4075],
		'拉萨': [91.1865, 30.1465],
		'无锡': [120.3442, 31.5527],
		'日照': [119.2786, 35.5023],
		'昆明': [102.9199, 25.4663],
		'杭州': [119.5313, 29.8773],
		'枣庄': [117.323, 34.8926],
		'柳州': [109.3799, 24.9774],
		'株洲': [113.5327, 27.0319],
		'武汉': [114.3896, 30.6628],
		'汕头': [117.1692, 23.3405],
		'江门': [112.6318, 22.1484],
		'沈阳': [123.1238, 42.1216],
		'沧州': [116.8286, 38.2104],
		'河源': [114.917, 23.9722],
		'泉州': [118.3228, 25.1147],
		'泰安': [117.0264, 36.0516],
		'泰州': [120.0586, 32.5525],
		'济南': [117.1582, 36.8701],
		'济宁': [116.8286, 35.3375],
		'海口': [110.3893, 19.8516],
		'淄博': [118.0371, 36.6064],
		'淮安': [118.927, 33.4039],
		'深圳': [114.5435, 22.5439],
		'清远': [112.9175, 24.3292],
		'温州': [120.498, 27.8119],
		'渭南': [109.7864, 35.0299],
		'湖州': [119.8608, 30.7782],
		'湘潭': [112.5439, 27.7075],
		'滨州': [117.8174, 37.4963],
		'潍坊': [119.0918, 36.524],
		'烟台': [120.7397, 37.5128],
		'玉溪': [101.9312, 23.8898],
		'珠海': [113.7305, 22.1155],
		'盐城': [120.2234, 33.5577],
		'盘锦': [121.9482, 41.0449],
		'石家庄': [114.4995, 38.1006],
		'福州': [119.4543, 25.9222],
		'秦皇岛': [119.2126, 40.0232],
		'绍兴': [120.564, 29.7565],
		'聊城': [115.9167, 36.4032],
		'肇庆': [112.1265, 23.5822],
		'舟山': [122.2559, 30.2234],
		'苏州': [120.6519, 31.3989],
		'莱芜': [117.6526, 36.2714],
		'菏泽': [115.6201, 35.2057],
		'营口': [122.4316, 40.4297],
		'葫芦岛': [120.1575, 40.578],
		'衡水': [115.8838, 37.7161],
		'衢州': [118.6853, 28.8666],
		'西宁': [101.4038, 36.8207],
		'西安': [109.1162, 34.2004],
		'贵阳': [106.6992, 26.7682],
		'连云港': [119.1248, 34.552],
		'邢台': [114.8071, 37.2821],
		'邯郸': [114.4775, 36.535],
		'郑州': [113.4668, 34.6234],
		'鄂尔多斯': [108.9734, 39.2487],
		'重庆': [107.7539, 30.1904],
		'金华': [120.0037, 29.1028],
		'铜川': [109.0393, 35.1947],
		'银川': [106.3586, 38.1775],
		'镇江': [119.4763, 31.9702],
		'长春': [125.8154, 44.2584],
		'长沙': [113.0823, 28.2568],
		'长治': [112.8625, 36.4746],
		'阳泉': [113.4778, 38.0951],
		'青岛': [120.4651, 36.3373],
		'韶关': [113.7964, 24.7028]

	};
	var BJData = [
		[{
			name: '上海',
			value: 100
		}, {
			name: '北京'
		}],
		[{
			name: '广州',
			value: 70
		}, {
			name: '北京'
		}],
		[{
			name: '哈尔滨',
			value: 30
		}, {
			name: '北京'
		}],
		[{
			name: '青岛',
			value: 50
		}, {
			name: '北京'
		}],
		[{
			name: '南昌',
			value: 20
		}, {
			name: '北京'
		}],
		[{
			name: '银川',
			value: 10
		}, {
			name: '北京'
		}],
		[{
			name: '拉萨',
			value: 80
		}, {
			name: '北京'
		}],
		[{
			name: '西安',
			value: 55
		}, {
			name: '北京'
		}],
		[{
			name: '乌鲁木齐',
			value: 90
		}, {
			name: '北京'
		}]
	];
	var convertData = function(data) {
		var res = [];
		for(var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap[dataItem[0].name];
			var toCoord = geoCoordMap[dataItem[1].name];
			if(fromCoord && toCoord) {
				res.push([{
					coord: fromCoord,
					value: dataItem[0].value
				}, {
					coord: toCoord,
				}]);
			}
		}
		return res;
	};

	var color = ['#a6c84c', '#ffa022', '#46bee9'];
	var series = [];
	[
		['北京', BJData]
	].forEach(function(item, i) {
		series.push(

			{
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 4,
					trailLength: 0.02,
					symbol: 'arrow',
					symbolSize: 5,
				},
				lineStyle: {
					normal: {
						width: 1,
						opacity: 0.6,
						curveness: 0.2
					}
				},

				data: convertData(item[1])
			}, {
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						offset: [5, 0],
						formatter: '{b}'
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'circle',
				symbolSize: function(val) {
					return 4 + val[2] / 10;
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#f00'
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[0].name,
						value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
					};
				}),
			},
			//被攻击点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						//			                offset:[5, 0],
						color: '#ff0000',
						formatter: '{b}',
						textStyle: {
							color: "#ff0000"
						}
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'pin',
				symbolSize: 30,
				itemStyle: {
					normal: {
						show: true,
						color: '#9966cc'
					}
				},
				data: [{
					name: item[0],
					value: geoCoordMap[item[0]].concat([300]),
				}],
			}
		);
	});

	option = {
		backgroundColor: '#fff',

		visualMap: {
			min: 0,
			max: 100,
			calculable: true,
						color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
			
			textStyle: {
				color: '#fff'
			}
		},
		geo: {
			map: 'china',
			label: {
				emphasis: {
					show: false
				}
			},
			roam: true,
			layoutCenter: ['50%', '53%'],
			layoutSize: "108%",
			itemStyle: {
				normal: {
					color: '#FFF', //地图颜色
					borderColor: '#7db8f9' //地图线的颜色
				},
				emphasis: {
					color: '#389BB7'
				}
			}
		},

		series: series
	};
	myChart.setOption(option);
	//	环形图
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '环形图';

	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		color: ['#5b8ffb', '#ab90df', '#07dfe4', '#e7536b', '#fed061', '#0073f4'],
		legend: {
			orient: 'vertical',
			x: 'right',
			y: 'top',
			textStyle: {
				fontSize: '12',
				fontWeight: ''
			},
			data: ['研究员/教授', '副研究员/副教授', '助理研究员/助教', '博士学生', '硕士学生', '学生']
		},
		series: [{
			name: '访问来源',
			type: 'pie',
			radius: ['50%', '70%'],
			center: ['33%', '57%'],
			avoidLabelOverlap: false,

			label: {
				normal: {
					show: false,
					position: 'center'
				},
				emphasis: {
					show: true,
					textStyle: {
						fontSize: '16',
						fontWeight: 'bold'
					}
				}
			},
			labelLine: {

				normal: {
					show: true
				}
			},
			data: [{
					value: 1008,
					name: '研究员/教授'
				},
				{
					value: 880,
					name: '副研究员/副教授'
				},
				{
					value: 534,
					name: '助理研究员/助教'
				},
				{
					value: 835,
					name: '博士学生'
				},
				{
					value: 900,
					name: '硕士学生'
				},
				{
					value: 848,
					name: '学生'
				}
			]
		}]
	};;
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	};

	var dom = document.getElementById("containerL");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '环形图';

	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		color: ['#5b8ffb', '#ab90df', '#07dfe4', '#e7536b', '#fed061', '#0073f4'],
		legend: {
			orient: 'vertical',
			x: 'right',
			y: 'top',
			textStyle: {
				fontSize: '12',
				fontWeight: ''
			},
			data: ['研究员/教授', '副研究员/副教授', '助理研究员/助教', '博士学生', '硕士学生', '学生']
		},
		series: [{
			name: '访问来源',
			type: 'pie',
			radius: ['50%', '70%'],
			center: ['33%', '57%'],
			avoidLabelOverlap: false,

			label: {
				normal: {
					show: false,
					position: 'center'
				},
				emphasis: {
					show: true,
					textStyle: {
						fontSize: '16',
						fontWeight: 'bold'
					}
				}
			},
			labelLine: {

				normal: {
					show: true
				}
			},
			data: [{
					value: 285,
					name: '研究员/教授'
				},
				{
					value: 110,
					name: '副研究员/副教授'
				},
				{
					value: 534,
					name: '助理研究员/助教'
				},
				{
					value: 835,
					name: '博士学生'
				},
				{
					value: 200,
					name: '硕士学生'
				},
				{
					value: 148,
					name: '学生'
				}
			]
		}]
	};;
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	};

	//			第二个饼状图
	//			var dom = document.getElementById("container");
	//			var myChart = echarts.init(dom);
	//			var app = {};
	//			option = null;
	//			option = {
	////				backgroundColor: '#2c343c',
	//
	//				title: {
	//					text: '',
	//					left: 'center',
	//					top: 20,
	//					textStyle: {
	//						color: '#ccc'
	//					}
	//				},
	//
	//				tooltip: {
	//					trigger: 'item',
	//					formatter: "{a} <br/>{b} : {c} ({d}%)"
	//				},
	//				color:['#5b8ffb', '#ab90df','#07dfe4','#e7536b','#fed061','#0073f4'],
	//				visualMap: {
	//					show: false,
	//					min: 80,
	//					max: 600,
	//					inRange: {
	//						colorLightness: [0, 1]
	//					}
	//				},
	//				series: [{
	//					name: '访问来源',
	//					type: 'pie',
	//					radius: ['0','85%'],
	//					center: ['50%', '50%'],
	//					data: [{
	//							value: 200,
	//							name: '研究员/教授'
	//						},
	//						{
	//							value: 310,
	//							name: '副研究员/副教授'
	//						},
	//						{
	//							value: 274,
	//							name: '助理研究员/助教'
	//						},
	//						{
	//							value: 235,
	//							name: '博士学生'
	//						},
	//						{
	//							value: 300,
	//							name: '硕士学生'
	//						},
	//						{
	//							value: 400,
	//							name: '学生'
	//						}
	//					].sort(function(a, b) {
	//						return a.value - b.value;
	//					}),
	//					roseType: 'radius',
	//					label: {
	//						normal: {
	//							textStyle: {
	//								color: 'rgba(0, 0, 0, 0.3)'
	//							}
	//						}
	//					},
	//					labelLine: {
	//						normal: {
	//							lineStyle: {
	//								color: 'rgba(255, 255, 255, 0.3)'//线的颜色
	//							},
	//							smooth: 0.2,
	//							length: 10,
	//							length2: 20
	//						}
	//					},
	//					itemStyle: {
	//						normal: {
	////							color: '#c23531',
	////							shadowBlur: 200,
	////							shadowColor: 'rgba(0, 0, 0, 0.5)'
	//						}
	//					},
	//
	//					animationType: 'scale',
	//					animationEasing: 'elasticOut',
	//					animationDelay: function(idx) {
	//						return Math.random() * 200;
	//					}
	//				}]
	//			};;
	//			if(option && typeof option === "object") {
	//				myChart.setOption(option, true);
	//			}
})